<template>
	<view class="container">
		<view class="avatar">
			<image src="/static/images/avatar.png"></image>
		</view>

		<view class="form">
			<uv-form labelPosition="left" labelWidth="80" :model="business" :rules="rules" ref="form">
				<!-- 表单元素 -->
				<uv-form-item label="手机号码" prop="mobile" borderBottom>
					<uv-input v-model="business.mobile" border="none" placeholder="请输入手机号码"></uv-input>
				</uv-form-item>

				<uv-form-item label="密码" prop="password" borderBottom>
					<uv-input type="password" v-model="business.password" border="none" placeholder="请输入密码"></uv-input>
				</uv-form-item>

				<view style="margin-top:25px">
					<uv-button type="primary" :plain="true" @click="OnSubmit">绑定账号</uv-button>
				</view>

				<!-- 用户许可协议 -->
				<view class="agreement">
					<uv-checkbox-group v-model="agreementStatus">
						<uv-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
						<navigator url="/pages/business/agreement">用户服务协议、隐私政策</navigator>
					</uv-checkbox-group>
				</view>

				<view class="btn" @click="ToHome">返回首页</view>
			</uv-form>
		</view>

		<!-- 消息提示 -->
		<uv-toast ref="notice"></uv-toast>
	</view>
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    // 表单元素
    let form = ref()
    let notice = ref()
    let openid = ref('')
    let agreementStatus = ref([])

    //表单初始化数据
    let business = ref({
        mobile: '13888888666',
        password: '123456'
    })

    //表单元素的验证规则
    let rules = ref({
        mobile: [
            {
                type: 'string',
                required: true, //要求必填
                message: '手机号码不能为空',
                trigger: ['change', 'blur'], //触发的事件动作
            },
            {
                //自定义验证函数
                validator: (rule, value, callback) => uni.$uv.test.mobile(value),
                message: '手机号码格式有误，请重新填写',
                trigger: ['change', 'blur'], //触发的事件动作
            },
        ],
        password: [
            {
                type: 'string',
                required: true,
                message: '密码不能为空',
                trigger: ['blur', 'change']
            }
        ]
    })
    
    onLoad((options) => openid.value = options.openid ?? '')
    
    // 表单提交绑定
    const OnSubmit = async () => {

        form.value.validate().then(async (res) => {
            if(agreementStatus.value.length == 0)
            {
                notice.value.show({
                    type: 'error',
                    icon: 'close-circle',
                    message: '请阅读并同意许可协议'
                })
                return false
            }
            
            let params = {
                mobile: business.value.mobile,
                password: business.value.password,
                openid: openid.value
            }
            
            let result = await uni.$uv.http.post('/business/WxBind', params)
            
            if(result.code == 0)
            {
                notice.value.show({
                    type: 'error',
                    icon: 'close-circle',
                    message: result.msg
                })
                return false
            }
            
            uni.setStorageSync('business', result.data)
            proxy.$business.value = result.data
            
            notice.value.show({
                type: 'success',
                message: result.msg,
                complete: () => {
                    uni.$uv.route({
                        type: 'back',
                        delta: 1
                    })
                }
            })
            
            return false
        }).catch(err => {
            console.log(err)
            notice.value.show({
                type: 'error',
                icon: 'close-circle',
                message: '表单填写有误，请重新填写'
            })
        })
    }
    
    // 返回首页
    const ToHome = () => {
        uni.$uv.route({
            type: 'reLaunch',
            url: '/pages/validate/validate'
        })
    }
    
</script>

<style>
	page {
		background-color: #f8fafe;
	}

	.container .avatar {
		text-align: center;
		background-color: #fff;
		padding-bottom: 20px;
	}

	.avatar image {
		width: 80px;
		height: 80px;
		margin: 50px 0 20px;
	}

	.form {
		margin: 0 50rpx;
		box-sizing: border-box;
	}

	.btn {
		margin-top: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.agreement {
		display: flex;
		justify-content: center;
		margin-top: 30px;
		font-size: 14px;
	}
    
    .btn {
    	margin-top: 25px;
    	display: flex;
    	justify-content: center;
    	align-items: center;
        color: #888;
        font-size: 12px;
    }

	navigator {
		color: #33ccff;
	}
</style>
